﻿<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="../../codebase/webix.css" type="text/css" media="screen" charset="utf-8">
		<script src="../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
		<title>Creating Basic App. Step 2</title>
	</head>
<body>

<script type="text/javascript" charset="utf-8">
var filmset = [
    { id:1, title:"The Shawshank Redemption", year:1994},
    { id:2, title:"The Godfather", year:1972},
    { id:3, title:"The Godfather: Part II", year:1974},
    { id:4, title:"The Good, the Bad and the Ugly", year:1966},
    { id:5, title:"My Fair Lady", year:1964},
    { id:6, title:"12 Angry Men", year:1957}
];

webix.ui({
	width:500, 
    rows: [
   		{ view:"toolbar", id:"mybar", elements:[
                    { view:"button", value:"Add", width:70, click:"add_row"},
                    { view:"button", value:"Update", width:70, click:"update_row"},
                    { view:"button", value:"Delete", width:70, click:"delete_row"},
                    { view:"button", value:"Clear Form", width:100, click:"$$('myform').clear()"}		
                    ]
    	},
    	{ cols:[
        	{ view:"form", id:"myform", width: 200, elements:[
                    { view:"text", name:"title", placeholder:"Title"},  //1st column
                    { view:"text", name:"year", placeholder:"Year"}     
                    ]
        	},         
			{ view:"list", id:"mylist",
            template:"#title# - #year#",   //2nd column
            select:true, //enable selection of list items
            height:400,
            data: filmset,

        	}]
    	}
    ]
});


			

function add_row(){
			$$("mylist").add({
				title: $$("myform").getValues().title,
				year: $$("myform").getValues().year
			})
}
		
function delete_row() {
var id = $$("mylist").getSelectedId();
	webix.confirm({
		title: "Delete",// the text of the box header
		text: "Are you sure you want to delete the selected item?",// the text of the body
		callback: function(result) { //callback function that will be called on the button click. The result is true or false subject to the clicked button.
			if (result) {
				$$("mylist").remove(id);
				} 
			}
		});
}

$$("mylist").attachEvent("onAfterSelect", function(id){
		$$("myform").setValues({
		title: $$("mylist").getItem(id).title,
		year: $$("mylist").getItem(id).year
		});
		}); 
		
		
function update_row() {
			var sel = $$("mylist").getSelectedId();
				if(!sel) return;
				
            var value1 = $$('myform').getValues().title;
			var value2 = $$('myform').getValues().year;
				
			for (var i = 0; i < sel.length; i++){
				var item = $$("mylist").getItem(sel[i]); //for every selected item
				item.title = value1;
				item.year = value2;
				$$("mylist").updateItem(sel[i], item);
			}
}


</script>

</body>
</html>